<template>
	<view :style="{ paddingTop: safeAreaTop + 'px' }">
		<up-navbar title="自主解读" :autoBack="true" />
		<view class="multiuser-auto">
			<view class="group-name">{{type}} Penta</view>
			<view class="avatar flex-r a-c mt-2">
				<view class="flex-c a-c j-c">
					<up-avatar size="50" text="刘" fontSize="24" randomBgColor></up-avatar>
					<view class="user-name flex-r a-c">
						<view :style="{'background':'#9A50EA'}"></view>小刘
					</view>
				</view>
				<view class="flex-c a-c j-c">
					<up-avatar size="50" text="北" fontSize="24" randomBgColor></up-avatar>
					<view class="user-name flex-r a-c">
						<view :style="{'background':'#EC5D31'}"></view>小北
					</view>
				</view>
				<view class="flex-c a-c j-c">
					<up-avatar size="50" text="山" fontSize="24" randomBgColor></up-avatar>
					<view class="user-name flex-r a-c">
						<view :style="{'background':'#44CA1B'}"></view>小山
					</view>
				</view>
			</view>
			<view class="map">
				<template v-for="i in [5,6]" :key="i">
					<view class="flex-r a-c s-b">
						<template v-for="i in [1,2,3]" :key="i">
							<view class="items flex-c a-c j-c mt-2">
								<view class="title-top">31 纪律</view>
								<view class="color-block flex-r s-b a-c">
									<view></view>
									<view :style="{'background':'#44CA1B'}"></view>
									<view  :style="{'background':'#EC5D31'}"></view>
									<view></view>
									<view></view>
								</view>
								<view class="color-block flex-r s-b a-c">
									<view :style="{'background':'#9A50EA'}"></view>
									<view></view>
									<view></view>
									<view></view>
									<view></view>
								</view>
								<view class="title-bottom">7 未来</view>
							</view>
						</template>
					</view>
				</template>
			</view>
			<view class=" mt-3">
				<button class="button-active">找咨询师1对1在线专业咨询</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		type: {
			type: String,
			default: "团队"
		}
	})
	const safeAreaTop = uni.$safeArea?.safeAreaTop || 44;
</script>

<style lang="scss">
	.multiuser-auto {
		padding: 30rpx;

		.group-name {
			font-weight: 500;
			font-size: 18px;
			color: #000000;
			line-height: 25px;
			padding: 0 20rpx;
		}

		.avatar {
			justify-content: space-evenly;

			.user-name {
				font-size: 20rpx;
				color: #000000;
				line-height: 28rpx;
				margin-top: 10rpx;

				view {
					width: 18rpx;
					height: 18rpx;
					background: #9A50EA;
					border-radius: 50%;
					margin-right: 6rpx;
				}
			}
		}

		.map {
			.items {

				.title-top,
				.title-bottom {
					width: 198rpx;
					line-height: 56rpx;
					font-weight: 600;
					font-size: 24rpx;
					color: #4D4D4D;
					text-align: center;
				}

				.title-top {
					background: linear-gradient(180deg, #E7E7E7 0%, #F7F7F7 100%);
					border-radius: 8rpx 8rpx 0px 0px;
				}

				.title-bottom {
					background: linear-gradient(180deg, #EFEFEF 0%, #E9E9E9 0%, #F8F8F8 100%);
					border-radius: 8rpx 8rpx 0px 0px;
				}

				.color-block {
					width: 100%;
					margin: 6rpx 0;

					view {
						width: 30rpx;
						height: 164rpx;
						background: #E8E8E8;
					}
				}
			}
		}
	}
</style>